<template>
    <div class="viewBrokerageStoreDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>合约中心</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/channelOrAgentManage' }">渠道经纪管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: viewBrokerageStoreUrl }">查看经纪门店</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form label-width="120px" size="small" :model="form">
            <el-form-item label="店铺所在城市：">{{form.storesCity}}</el-form-item>
            <el-form-item label="公司名称：" prop="brokerCompanyId">{{form.brokerCompanyName}}</el-form-item>
            <el-form-item label="门店名称：" prop="storesName">{{form.storesName}}</el-form-item>
            <el-form-item label="服务板块：" prop="storeCityCode">{{form.sysCityAreasName}}</el-form-item>
            <el-form-item label="门店归属：" prop="leaderId">{{form.leaderName}} {{form.leaderPhone}}</el-form-item>
            <el-form-item label="备注地址：" prop="storeAddress">{{form.storeAddress}}</el-form-item>
            <el-form-item label="门店地址：" prop="storeDrawAddress">{{form.storeDrawAddress}}</el-form-item>
            <el-form-item label="经纬坐标：" prop="storeDrawAddress">{{form.storeDrawStuff}}  {{form.storeDrawWoof}}</el-form-item>
        </el-form>
        <el-tabs v-model="recordName">
            <el-tab-pane label="操作记录" name="操作记录">
                <el-table
                        :data="recordOperate"
                        tooltip-effect="dark"
                        border>
                    <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="operateContent"
                            align="center"
                            label="操作">
                    </el-table-column>
                    <el-table-column
                            prop="createName"
                            align="center"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="createRole"
                            align="center"
                            label="角色">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            align="center"
                            label="时间">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="分配记录" name="分配记录">
                <el-table
                        :data="recordAssign"
                        tooltip-effect="dark"
                        border>
                    <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="createName"
                            align="center"
                            label="操作人">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            align="center"
                            label="操作时间">
                    </el-table-column>
                    <el-table-column
                            prop="allocatOn"
                            align="center"
                            label="归属时间">
                    </el-table-column>
                    <el-table-column
                            prop="allocatEnd"
                            align="center"
                            label="截止时间">
                        <template slot-scope="scope">{{scope.row.allocatEnd || '——'}}</template>
                    </el-table-column>
                    <el-table-column
                            prop="allocatLeaderName"
                            align="center"
                            label="门店归属">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'viewBrokerageStoreDetail',
        data() {
            return {
                form: {},
                storeNumber: '',
                recordName:'操作记录',
                recordOperate: [],
                recordAssign: [],
                id: "",
                viewBrokerageStoreUrl : '',
            }
        },
        mounted() {
            const query =  this.$route.query
            this.id = query.id;
            this.storeNumber = query.storeNumber;
            this.viewBrokerageStoreUrl  = `/viewBrokerageStore?companyName=${query.companyName}`
            this.getDetail(this.id, this.storeNumber)
        },
        methods: {
            getDetail(id, storeNumber) {
                this.$axios.post("/cms/stores/stores/fullStore", {
                    storeId: id,
                    storeCode: storeNumber
                }).then((res) => {
                    this.form = res.store
                    this.recordOperate = res.operation
                    this.recordAssign = res.allocation
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>

